<!DOCTYPE html>
<html>
<head>
    <title>SelectMenu入门指南</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
    <link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">

    <link rel="stylesheet" href="../lib/selectmenu/selectmenu.css" type="text/css">

    <link rel="stylesheet" href="../css/selectmenu/header.css" />
    <link rel="stylesheet" href="../css/guide.css" />
</head>

<body>
	<div class="content">
	<div class="container">
		<h1 class="text-center">入门指南</h1>

		<h3>资源导入 <small>在网页上引用css样式、js脚本等文件</small></h3>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- 基础环境引用说明 -->
<!-- jQuery功能库引用 -->
<script type="text/javascript" src="jquery.min.js" >< /script>

<!-- SelectMenu插件样式引用 -->
<link rel="stylesheet" href="selectmenu.css" type="text/css">

<!-- SelectMenu插件核心脚本 -->
<script type="text/javascript" src="selectmenu.js" >< /script>
]]>
</script>


		<h3>HTML代码</h3>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- 设置触发菜单打开对象，在此仅为最常用的按钮为例 -->
<button type="button" id="btnDemo">Select Menu</button>
]]>
</script>

		<h3>Javascript初始化插件代码</h3>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//定义数据源
//数据格式：Array[{Object},{...}]
var data = [
	{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
	{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
	{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
	{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//初始化插件
$('#btnDemo').selectMenu({
	showField : 'desc',
	keyField : 'id',
	data : data
});
]]>
</script>










	</div>
	</div>








<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script type="text/javascript" src="../lib/selectmenu/selectmenu.min.js" ></script>
<script type="text/javascript" src="../js/common.js" ></script>
<script type="text/javascript" >
$(function(){
    setActive('mnuGuide');
    SyntaxHighlighter.all();
});
</script>
</body>
</html>